Estoy tratando de reproducir un video de Youtube usando videojs y videojs-youtube. Instalé las últimas versiones con npm (videojs 7.18.1, videoojs-youtube 2.6.1). Estoy cargando en este orden:

 <script type="text/javascript" src="/node_modules/video.js/dist/video.js"></script> <script type="module" src="/node_modules/videojs-youtube/dist/Youtube.js"></script>

Cuando se carga la página, aparece el error: "No se pueden leer las propiedades de undefined (leyendo 'videojs')" cuando llega a la línea 32:

 root.Youtube = factory(root.videojs);

Si trato de reproducir el video, obtengo los siguientes errores:

 VIDEOJS: ERROR: The "youtube" tech is undefined. Skipped browser support check for that tech. VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.

Estoy creando el jugador en JavaScript con:

 videojs(video.id).ready(function () { myPlayer = this; myPlayer.width = width; myPlayer.height = height; myPlayer.addClass("video-js"); myPlayer.addClass("vjs-default-skin"); myPlayer.autoplay(true); myPlayer.controls(true); myPlayer.options_.techOrder[1] = "youtube"; myPlayer.preload("auto"); myPlayer.on("play", moviePlay); myPlayer.on('ended', movieEnded); myPlayer.on('failed', movieFailed); myPlayer.on('seeking', movieSeeking); });

Estoy seleccionando de una serie de videos, así que los hago con:

 myPlayer.src( { type: "video/youtube", src: "https://www.youtube.com/watch?v=HlXexv4Uc1E?1651837154234" } );

Youtube aparece en el techOrder. No estaba seguro de cómo hacerlo en JavaScript, pero parece ser uno de los dos en la matriz. La página en sí está en un marco de un conjunto de marcos si eso hace alguna diferencia. Cambié el ejemplo de JavaScript videojs-youtube en un conjunto de marcos .asp y usé el mismo tipo de archivos de inclusión y funciona bien. ¿Podría tener nombres de variables o funciones que entren en conflicto... algo así?

¿Qué he hecho mal y cómo soluciono el error original que supongo causa los otros dos errores en el juego?